CSS (Cascading Style Sheets，階層樣式表)，用來描述 HTML 外觀的樣式表，含有各式各樣的樣式屬性，能夠讓你在元素上面套用樣式美化網站。
直接來看看 CSS 如何套用樣式在元素上。比如，要讓 <h1> 裡的文字內容變成藍色：
h1 {
color:blue;
}
是不是簡單易懂，這就是 CSS 的語法組成：
h1：選擇要套用樣式的元素{...}：可以包含許多樣式屬性color:blue;：包含屬性 (Properties) 和屬性值 (Property value)。前面所舉例的選擇器 (Selector)— h1，就是所謂的元素選擇器 (Element selector)，它會選取所有 HTML 元素中的 <h1> 標籤。
那我想要單獨套用樣式該怎麼做？別擔心，CSS還提供了其他選擇器，比如：
ID 選擇器 (ID selector)：在 ID 屬性值前面加上 #，就能選擇含有指定 ID 屬性的特定元素。
#id {
color:blue;
}
Class 選擇器 (Class selector)：在 class 屬性值前面加上 . ，就能選擇含有指定class屬性的所有元素。
.class {
color:blue;
}
如果你還想為你的網頁加上更多變化，CSS 還提供了虛擬類別選擇器 (Pseudo-classes selector)，可以在指定的情況發生時，套用樣式到元素上，比如：
:link //連結平常的樣式
:hover //滑鼠滑入的樣式
:active //滑鼠按下的樣式
在 ID 屬性值後面加上指定的樣式 :hover
#id:hover {
color:blue;
}
當然CSS還有提供其他好用的選擇器，如果你還想了解更多，可以參考這篇
已經大致了解了 CSS 的使用後，在介紹各種樣式屬性之前，我們必須先知道如何將 CSS 的檔案連結套用到 HTML 上，總共會有三種方法：外部樣式表、內部樣式表和行內樣式
在 <head> 裡使用 <link> 連結 CSS 檔案，是最常見的 CSS 引入方法：
<link rel="stylesheet" href="檔名.css" />
在 <head> 裡使用 <style></style> 直接創立 CSS 樣式：
<style>
h1 {
color:red;
}
</style>
直接在元素裡新增 style 屬性，對單個元素套用 CSS 樣式：
<h1 style="樣式表">示範 inline styles</h1>
認識更多樣式屬性之前，不能不提到 CSS (Cascading Style Sheets) 裡的 Cascading 概念，是 CSS 用來處理規則衝突的機制。指的是當你對同一個元素建立重複的樣式屬性，會優先使用後面的樣式，如下圖：
如果你想要深入了解更多CSS在處理規則衝突的機制，可以參考這篇
這個章節我們提到運用 CSS 的選擇器建立樣式，以及套用樣式表到 HTML 的方法，讓原本枯燥的內容文字多了點變化，下一篇我們就會來說明更多樣式屬性，讓 CSS 真正發揮他的功力，一起期待明天的 CSS Showtime 吧！
如果文章中有錯誤的地方，要麻煩各位大大不吝賜教；喜歡的話，也要記得幫我按讚訂閱喔❤️
iThome鐵人賽
看影片追技術